<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <meta name="author" content="Robert Yao - yaohaixiao.com">
    <meta name="keyword" content="AutocJS,jQuery,jQuery Plugin">
    <meta name="description" content="AutocJS: Automatically create directory navigation for your article.">
    <!-- Mobile Specific Meta -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Customize title - Examples - AutocJS</title>
    <link href="../asset/normalize/normalize.css" type="text/css" rel="stylesheet" media="all">
    <link href="../css/api.css" type="text/css" rel="stylesheet">
    <link href="../css/autoc.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="api-header">
    <h1 class="api-project">AutocJS</h1>
    <ul class="api-navigation">
        <li><a href="../index.htm">Home</a></li>
        <li><a href="../api/index.htm">API Documentation</a></li>
        <li class="api-active"><a href="index.htm">Examples</a></li>
        <li><a href="https://github.com/yaohaixiao/AutocJS/archive/master.zip">Download</a></li>
    </ul>
</div>
<div class="api-wrap" id="examples">
    <h1 class="api-subject">Customize title</h1>
    <div class="api-container" id="container">
        <div class="api-content">
            <div class="api-half-field">
                <h3>Options</h3>
                <ul class="api-options" id="options">
            <li class="api-option"><input type="radio" class="api-radio" name="option" id="option-1" checked="checked" value="Table of Contents"><label class="api-label" for="option-1">Table of Contents<sup>default</sup></label></li>
            <li class="api-option"><input type="radio" class="api-radio" name="option" id="option-2" value="Customize Title"><label for="option-2" class="api-label">Customize Title</label></li>
            <li class="api-option"><input type="radio" class="api-radio" name="option" id="option-3" value="Example"><label for="option-3" class="api-label">Example</label></li>
            <li class="api-option"><input type="radio" class="api-radio" name="option" id="option-4" value="AutocJS API"><label for="option-4" class="api-label">AutocJS API</label></li>
                </ul>
            </div>
            <div class="api-half-field">
                <h3>Code</h3>
    <pre class="api-code"><code id="code">new AutocJS({
    article: '#container',
    // 设置标题文本为： <span class="option-value">Table of Contents</span>
    title: '<span class="option-value">Table of Contents</span>'
});</code></pre>
            </div>
        </div>
        <div class="api-content" id="demo">
            <h2>Example Article Title</h2>
            <div class="api-container">
            <p>创作的灵感 AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？于是就有了AutocJS. What is AutocJS? AutocJS 是一个专门用来给文章生成目录（Table of Contents）导航菜单的工具。AutocJS 会查找文章指定区域中的所有h1~h6的标签，并自动生成文章的目录导航菜单。 Why AutocJS? AnchorJS 由于是国外的程序员开发的，所以对中文支持不好，无法给中文标题生成锚点。AutocJS 就是一个即支持英文也支持中文的解决方案。 </p>
            <h3>Features</h3>
            <p>创作的灵感 AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？于是就有了AutocJS. What is AutocJS? AutocJS 是一个专门用来给文章生成目录（Table of Contents）导航菜单的工具。AutocJS 会查找文章指定区域中的所有h1~h6的标签，并自动生成文章的目录导航菜单。 Why AutocJS? AnchorJS 由于是国外的程序员开发的，所以对中文支持不好，无法给中文标题生成锚点。AutocJS 就是一个即支持英文也支持中文的解决方案。 </p>
            <h4>Features One</h4>
            <p>创作的灵感 AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？于是就有了AutocJS. What is AutocJS? AutocJS 是一个专门用来给文章生成目录（Table of Contents）导航菜单的工具。AutocJS 会查找文章指定区域中的所有h1~h6的标签，并自动生成文章的目录导航菜单。 Why AutocJS? AnchorJS 由于是国外的程序员开发的，所以对中文支持不好，无法给中文标题生成锚点。AutocJS 就是一个即支持英文也支持中文的解决方案。 </p>
            <h5>Tip One</h5>
            <p>创作的灵感 AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？于是就有了AutocJS. What is AutocJS? AutocJS 是一个专门用来给文章生成目录（Table of Contents）导航菜单的工具。AutocJS 会查找文章指定区域中的所有h1~h6的标签，并自动生成文章的目录导航菜单。 Why AutocJS? AnchorJS 由于是国外的程序员开发的，所以对中文支持不好，无法给中文标题生成锚点。AutocJS 就是一个即支持英文也支持中文的解决方案。 </p>
            <h5>Tip Two</h5>
            <p>创作的灵感 AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？于是就有了AutocJS. What is AutocJS? AutocJS 是一个专门用来给文章生成目录（Table of Contents）导航菜单的工具。AutocJS 会查找文章指定区域中的所有h1~h6的标签，并自动生成文章的目录导航菜单。 Why AutocJS? AnchorJS 由于是国外的程序员开发的，所以对中文支持不好，无法给中文标题生成锚点。AutocJS 就是一个即支持英文也支持中文的解决方案。 </p>
            <h4>Features Two</h4>
            <p>创作的灵感 AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？于是就有了AutocJS. What is AutocJS? AutocJS 是一个专门用来给文章生成目录（Table of Contents）导航菜单的工具。AutocJS 会查找文章指定区域中的所有h1~h6的标签，并自动生成文章的目录导航菜单。 Why AutocJS? AnchorJS 由于是国外的程序员开发的，所以对中文支持不好，无法给中文标题生成锚点。AutocJS 就是一个即支持英文也支持中文的解决方案。 </p>
            <h3>Code</h3>
            <p>创作的灵感 AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？于是就有了AutocJS. What is AutocJS? AutocJS 是一个专门用来给文章生成目录（Table of Contents）导航菜单的工具。AutocJS 会查找文章指定区域中的所有h1~h6的标签，并自动生成文章的目录导航菜单。 Why AutocJS? AnchorJS 由于是国外的程序员开发的，所以对中文支持不好，无法给中文标题生成锚点。AutocJS 就是一个即支持英文也支持中文的解决方案。 </p>
            <h4>Default</h4>
            <p>创作的灵感 AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？于是就有了AutocJS. What is AutocJS? AutocJS 是一个专门用来给文章生成目录（Table of Contents）导航菜单的工具。AutocJS 会查找文章指定区域中的所有h1~h6的标签，并自动生成文章的目录导航菜单。 Why AutocJS? AnchorJS 由于是国外的程序员开发的，所以对中文支持不好，无法给中文标题生成锚点。AutocJS 就是一个即支持英文也支持中文的解决方案。 </p>
            <h4>Customize</h4>
            <p>创作的灵感 AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？于是就有了AutocJS. What is AutocJS? AutocJS 是一个专门用来给文章生成目录（Table of Contents）导航菜单的工具。AutocJS 会查找文章指定区域中的所有h1~h6的标签，并自动生成文章的目录导航菜单。 Why AutocJS? AnchorJS 由于是国外的程序员开发的，所以对中文支持不好，无法给中文标题生成锚点。AutocJS 就是一个即支持英文也支持中文的解决方案。 </p>
            </div>
        </div>
    </div>
</div>
<div class="api-footer">
    <p class="api-author"><span class="api-version">AutocJS</span> · Created by <a href="http://www.yaohaixiao.com/">Robert
        Yao</a></p>
    <p class="license">Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a> ·
        Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a></p>
    <p class="issues"><a href="https://github.com/yaohaixiao/AutocJS">GitHub Project</a> · <a
            href="https://github.com/yaohaixiao/AutocJS/issues">Issues</a></p>
</div>
<script type="text/javascript" src="../asset/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/autoc.js"></script>
<script type="text/javascript">
    var $options = $('#options'),
        $code = $('#code'),
        ArticleTOC = $( '#demo' ).autoc( {
            isAnchorsOnly: false
        } ),
        changeOption = function(){
            var $radio = $(this),
                option = $radio.val();

            ArticleTOC.reload({
                title: option
            });

            $code.find('.option-value').html(option);
        };

    $options.delegate('.api-radio', 'click', changeOption);
</script>
</body>
</html>